<template>
  <div class="box">
    <h1>default input</h1>
    <Input placeholder="please entry......"></Input>

    <h1>input size demo</h1>
    <Input placeholder="large size" size="large"></Input>
    <Input placeholder="large size" v-model="val1" :src="ddd"></Input>
    <Input placeholder="large size" size="small" v-bind:class="ddd"></Input>

    <h1>have icon input</h1>
    <Input icon="ios-clock-outline"></Input>

    <h1>textarea</h1>
    <Input type="textarea" placeholder="please entry ......"></Input>
    <Input type="textarea" :rows="10" placeholder="please entry ......"></Input>

    <h1>autosize, minsize, maxsize</h1>
    <Input type="textarea" :autosize="true" v-model="value7"></Input>
    <Input type="textarea" v-model="value7"></Input>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value7: '',
        val1: ''
      }
    }
  }
</script>

<style>

</style>
